<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!--发布状态-->
    <!--发布状态-->
    <!--发布状态-->



</head>
<body>
<div id="app">
    <el-form :inline="true" label-width="70px" :model="formLabelAlign">
        <el-form-item label="新闻题目">
            <el-input v-model="formLabelAlign.total"></el-input>
        </el-form-item>
        <el-form-item label="作者">
            <el-input v-model="formLabelAlign.author"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit()">搜索</el-button>
        </el-form-item>
    </el-form>

    <template >
        <el-table
                :data="newsStatus"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="申请编号"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="total"
                    label="新闻题目"
                    width="350">
            </el-table-column>
            <el-table-column
                    prop="category.category"
                    label="新闻类别"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="author"
                    label="作者"
                    width="110">
            </el-table-column>
            <el-table-column
                    prop="time"
                    label="申请时间"
                    width="250">
            </el-table-column>
            <el-table-column
                    prop="auditor"
                    label="审核人"
                    width="120">
            </el-table-column>
            <el-table-column
                    v-if="show"
                    prop="status.status"
                    label="审核状态">
            </el-table-column>

            <el-table-column label="审核状态">

                <template slot-scope="scope">
                    <div v-if="scope.row.status.status=='新闻置顶'">
                        <el-button type="danger"   disabled>新闻已置顶</el-button>
                    </div>

                    <div v-if="scope.row.status.status=='上架'">
                        <el-button type="info"   disabled>已上架</el-button>
                    </div>
                    <div v-if="scope.row.status.status=='被下架了'">
                        <el-button type="warning"   disabled>很遗憾，被下架了</el-button>
                        <el-button   @click="under(scope.row.id)">删除新闻</el-button>
                    </div>
                    <div v-if="scope.row.status.status=='待审核'">
                        <el-button type="primary" @click="details(scope.row.id)">待审核,提前欣赏</el-button>
                    </div>
                    <div v-if="scope.row.status.status=='审核成功'">
                        <el-button type="success"  @click="details(scope.row.id)">审核成功,再次欣赏</el-button>
                    </div>
                    <div v-if="scope.row.status.status=='审核未过' ">
                        <el-button type="danger"  @click="noDetails(scope.row.id)">拒绝理由</el-button>
                        <el-button type="warning"  @click="resubmit(scope.row.id)">重新提交</el-button>
                    </div>
                </template>
            </el-table-column>

        </el-table>
    </template>

    <el-pagination
            style="text-align: center; margin: 0 auto;"
            background
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="totalCount">
    </el-pagination>

    <el-dialog title="新闻内容"
               :model="newsContent"
               :visible.sync="centerDialog"
               width="60%"

               center>

        <p v-html="newsContent.content" style="text-align: center"></p>

        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialog = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="拒绝理由"
               :model="to"
               :visible.sync="centerDialogVisible"
               width="40%"
               style="text-align: center"
               center>
        <p v-html="to.reason" style="text-align: center"></p>

        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>


</div>
<script>

    $.get("/ssm/category/list",function (backData) {
        haha.categoryArr= backData.data;
    });
    var haha = new Vue({
        el:"#app",
        data:{
            totalCount:0,
            to:{},
            newsContent:{},
            show:false,
            centerDialog:false,
            formLabelAlign:{},
            newsStatus:[],
            centerDialogVisible:false,

        },
        methods:{

            under(id){
                haha.$confirm('此操作将永久删除该新闻, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.get("/ssm/view/delete/"+id,function (backData) {
                        haha.$message.success('删除成功');
                        getData(1,10);
                    });
                })
            },


            //重新提交
            resubmit(id){
               window.location.href="/ssm/news/newsUpdate.html?id="+id;
            },

            //详情按钮  查看新闻
            details(id){
                $.get("/ssm/news/get/"+id,function (backData) {
                    haha.centerDialog = true;
                    haha.newsContent = backData.data;
                });
            },
            //  未通过，查看拒绝理由
            noDetails(id){
                $.get("/ssm/news/get/"+id,function (backData) {
                    haha.centerDialogVisible = true;
                    haha.to = backData.data;
                });
            },


            showUpdate(id){
                $.get("/ssm/category/list",function (backData) {
                    haha.categoryArr= backData.data;
                    $.get("/ssm/news/getID/"+id,function (backData) {
                        haha.search = backData.data;
                    })
                });
                window.location.href="/ssm/news/newsUpdatePublish.html";
            },
            handleCurrentChange( val ){
                getData(val,10);
            },
            onSubmit(){
                getData(1,10);
            }
        }
    });

    function getData(a , b) {
        haha.formLabelAlign.pageNo = a;
        haha.formLabelAlign.pageCount = b;
        $.post("/ssm/show/queryStatus",haha.formLabelAlign,function (backData) {
            haha.newsStatus = backData.data.currentData;
            haha.totalCount = backData.data.totalCount;
        });
    }
    getData(1,10)
</script>
</body>
</html>